<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册 - {$basicInfo.name}</title>
    <link rel="stylesheet" href="__THEMES__/defualt/css/lib/bootstrap.min.css">
    <link rel="stylesheet/less" href="__THEMES__/defualt/css/less/style.less">
    <script src="__THEMES__/defualt/js/lib/less.min.js"></script>
    <link rel="Shortcut Icon" href="{$basicInfo.favicon}">
    <link rel="Bookmark" href="{$basicInfo.favicon}">
    <link rel="stylesheet" href="__THEMES__/defualt/css/lib/datepicker.css">
    <style type="text/css">
        .container1 {
            vertical-align: middle;
            position: absolute;
            left: 0;
            width: 600px;
            right: 0;
            margin: auto;
            box-shadow: 0 4px 5px 0 rgba(0,0,0,0.09);
        }

        .input-group-prepend {
            margin-right: -10px;
        }

        .input-group {
            border: 1px solid #ced4da;
        }

        .input-group:hover {
            border: 1px solid deepskyblue!important;
        }

        body {
            background: #fff !important;
        }

        .error-msg {
            color: red;
        }
    </style>
</head>

<body>
    <div class="regest">
        <div class="regestbox">

        </div>
        <div class="">
            <div class="header row">
                 <div class="col-md-10">
                    <img src="{$basicInfo.logo}" alt="" width="100px">
                </div>
                 <div class="col-md-2 returnindex">
                    <a href="/">返回首页</a>
                </div>
            </div>
        </div>
        <div class="container1">
            <div class="m-5">
                <h2>欢迎注册智能云帐号</h2>
                <h3>准备开启您的云计算之旅</h3>
            </div>
            <div class="card unbg border-0">
                <div class="card-body bg-white">
                    <div class="resgbox">
                        <div class="mb-3 text-right">
                            <span> 已有账号，<a href="/login">立即登录 &gt;</a></span>
                        </div>
                        <div>
                            <div class="form-group">
                                <div class="input-group">
                                    <!-- <div class="input-group-prepend border-0 focus">
                                        <span class="btn input-group-text iconfont iconyonghu bg-white border-0"></span>
                                    </div> -->
                                    <input type="text" name="username" class="form-control border-0" required="required" autocomplete="off" placeholder="请输入用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <!-- <div class="input-group-prepend border-0 focus">
                                        <span class="btn input-group-text iconfont iconAPPBuilder-MBS bg-white border-0"></span>
                                    </div> -->
                                    <input type="text" name="phone" maxlength="11" class="form-control border-0" required="required" autocomplete="off" placeholder="请输入手机号码">
                                </div>
                            </div>
                            <!-- <div class="form-group">
                                <div class="row no-gutters">
                                    <div class="col-7 input-group w-100">
                                        <input class="form-control border-0" maxlength="6" name="smscode" required="required" autocomplete="off" type="text" placeholder="请输入6位短信验证码"></div>
                                    <div class="col-4 offset-1">
                                        <button type="button" class="btn btn-link bg-white border w-100 h-100 h-border-lightgray">获取验证码</button>
                                    </div>
                                </div>
                            </div> -->
                            <div class="form-group">
                                <div class="input-group">
                                    <!-- <div class="input-group-prepend border-0 focus">
                                        <span class="btn input-group-text iconfont iconApplication-SMN bg-white border-0"></span>
                                    </div> -->
                                    <input type="email" name="email" class="form-control border-0" required="required" autocomplete="off" placeholder="请输入电子邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <!-- <div class="input-group-prepend">
                                        <span class="btn input-group-text iconfont iconsuodinglocked35 bg-white border-0"></span>
                                    </div> -->
                                    <input type="password" name="password" class="form-control border-0" required="required" autocomplete="off" maxlength="18" placeholder="请设置6-18字符登录密码" aria-label="Username" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <!-- <div class="input-group-prepend ">
                                        <span class="btn input-group-text iconfont iconsuodinglocked35 bg-white border-0"></span>
                                    </div> -->
                                    <input class="form-control border-0" name="vpassword" type="password" placeholder="请确定登录密码" required="required" autocomplete="off" maxlength="18">
                                </div>
                            </div>

                            <div class="mt-1">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" name="agree" id="agree" value="1" class="custom-control-input" />
                                    <label class="custom-control-label" for="agree">我已阅读并同意
                                        <button type="button" class="btn btn-sm btn-link p-0" data-toggle="modal" data-target="#modal">《用户协议》</button>
                                    </label>
                                </div>
                            </div>
                            <button type="button" class="btn btn-success btn-lg w-100 mt-4 sub">注册</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
          © 2019 {$basicInfo.name} 
          <a href="#" target="_blank">{$basicInfo.idc}</a> - 
          <a href="#" target="_blank">{$basicInfo.isp}</a> - 
          ICP备案：<a href="#" target="_blank">{$basicInfo.icp}</a> - 
          公安网安备：<a href="#" target="_blank">{$basicInfo.beian}</a>

        </footer>
    </div>

    <div class="modal fade " id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content" style="height:700px;">
                <div class="modal-header border-0">
                    <h4 class="modal-title">用户协议</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        				<span aria-hidden="true">&times;</span>
        			</button>
                </div>
                <div class="modal-body px-5" id="modalbodytext">

                </div>
                <div class="modal-footer justify-content-center">

                    <button type="button" class="btn btn-sm btn-primary my-1" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <script src="__THEMES__/defualt/js/lib/jquery.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/popper.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/bootstrap.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/axios.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/js.cookie.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/lodash.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/qs.min.js"></script>
    <script src="__THEMES__/defualt/js/lib/decimal.min.js"></script>
    <script src="__STATIC__/dist/js/axiosConfig.js"></script>
    <script type="text/javascript">
        ajax('/regdeal').then(d=>{
            $("#modalbodytext").html(d);
        });
        $('.sub').click(function(){
            ajax('/regauth',{
                username: $('[name="username"]').val(),
                phone: $('[name="phone"]').val(),
                smscode: $('[name="smscode"]').val(),
                email: $('[name="email"]').val(),
                password: $('[name="password"]').val(),
                vpassword: $('[name="vpassword"]').val(),
                agree: $('[name="agree"]:checked').val()?$('[name="agree"]:checked').val():'',
            },'post').then(e=>{
                console.log(e);
                if(e.status == 200){
                    Cookies.set('token',e.token,{expires: 1/12,path: '/'});
                    location.reload();
                } else {
                    alert(e.msg);
                }
            });
        });
    </script>
</body>

</html>